<template>
	<view>
		<view class="sort-title">
			<image class="icon" src="../static/sort.png"></image>
			<view>积分池：<uv-count-to  :startVal="allprice" :endVal="allprice" separator="," color="#000000" :font-size="18"></uv-count-to></view>
		</view>
	<view style="padding-left: 10rpx;padding-right: 10rpx;">
		<v-tabs @input="changeTab" paddingItem ="0 22rpx" v-model="current" :tabs="tabs" :pills="true" line-height="0" activeColor="#fff" @change="changeTab" :zIndex="4"></v-tabs>
		<view class="allSort">
			<view v-for="item,index in list" :key="index" class="item">
				<view class="item">
					<view :style="{color:index<3?'#ff1500':'#000'}">{{index+1}}</view>
					
					<image class="item-img" :src="item.avatar" v-if="item.avatar"></image>
					<open-data type="userAvatarUrl"  class="item-img"  v-else></open-data>
					<view>{{item.userName}}</view>
				</view>
				<view class="item">
					积分：+
					<uv-count-to  :startVal="item.integral" :endVal="item.integral" separator="," color="#000000" :font-size="18"></uv-count-to>
				</view>
			</view>
		</view>
	</view>
	</view>
</template>

<script>
	import { allIntegral, getIntegralSort } from '@/api/user';
	import { mapState, mapGetters, mapMutations, mapActions } from 'vuex';
	export default {
		name:"tab",
		data() {
			return {
				list:[],
				allprice:"",
				current: 0,
				tabs: [
					'总排名',
					'日排名',
					'周排名',
					'月排名'
				  ],
			};
		},
		computed: mapGetters(['userInfo']),
		methods: {
		    changeTab(index) {
		      console.log('当前选中索引：' + index)
			  getIntegralSort({type:this.current+1}).then(res=>{
			  	this.list = res.data
			  })
		    },
			getdata(){
				allIntegral().then(res=>{
					this.allprice= res.data + ""
				})
				getIntegralSort({type:this.current+1}).then(res=>{
					this.list = res.data
				})
			}
		  }
	}
</script>

<style lang="less">
.allSort{
	background-color: #fff;
	border-radius: 10rpx;
	padding: 15rpx;
	gap:15rpx;
	height: 50vh;
	.item{
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
}
.item-img{
	width: 60rpx;
	height: 60rpx;
	border-radius: 20rpx;
}
.icon{
	width: 35rpx;
	height: 35rpx;
}
.sort-title{
	display: flex;
	justify-content: space-between;
	padding-left: 10rpx;
	padding-right: 10rpx;
	margin-top: 120rpx;
	margin-bottom: 20rpx;
	align-items: center;
}
</style>